<!--高级表格-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <Table
        :style="inputStyleObject"
        ref="table"
        :border="component.compConfigData.tableConfig.border"
        :show-header="component.compConfigData.tableConfig.showHeader"
        :loading="component.compConfigData.tableConfig.loading"
        :disabled-hover="component.compConfigData.tableConfig.disabledHover"
        :highlight-row="component.compConfigData.tableConfig.highlightRow"
        :size="component.compConfigData.tableConfig.size"
        :no-data-text="component.compConfigData.tableConfig.noDataText"
        :no-filtered-data-text="component.compConfigData.tableConfig.noFilteredDataText"
        :max-height="$parent.$parent.layoutItem.layoutItemConfigData.height"
        :columns="tableColumns"
        :data="tableData"
        @on-current-change="onCurrentChangeHandler"
    ></Table>
  </div>
</template>

<script>

  import AdvancedTableComp from './AdvancedTableComp'
  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'AdvancedTableComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        tableConfig: {
          // stripe: false,
          border: false,
          showHeader: true,
          loading: false,
          disabledHover: false,
          highlightRow: false,
          size: 'default',
          noDataText: '暂无数据',
          noFilteredDataText: '暂无筛选结果',
          draggable: false,
          rankingColumn: {
            show: true,
            title: '排名',
            fontSize: 20,
            width: 80,
            threshold: 3,
            firstColor: '#ffeb3b',
            secondColor: '#bdbdbd',
            thirdColor: '#795548',
          }
        },

        tableColumns: [
          AdvancedTableComp.buildTableColumnConfig({key: "name", title: "姓名"}),
          AdvancedTableComp.buildTableColumnConfig({key: "age", title: "年龄"}),
          AdvancedTableComp.buildTableColumnConfig({key: "date", title: "出生年月"}),
          AdvancedTableComp.buildTableColumnConfig({key: "address", title: "家庭地址"})
        ],

        tableStyle: {
          headerBackgroundColor: '#353535',
          headerColor: '#a1a1a1',
          bodyBackgroundColor: '#424242',
          bodyColor: '#fff',
          tableBorderColor: '#5b5b5b',
          rowHighlightBackgroundColor: '#2A2A2A',
          rowHighlightColor: '#fff',
        },

        tableEventCode: {
          onCurrentChangeCode: ''
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [

        ],
        ds_resultObj: [
          {
            name: "张三",
            age: 30,
            date: "1990-12-05",
            address: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          },
          {
            name: "李四",
            age: 28,
            date: "1992-10-22",
            address: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          },
          {
            name: "王五",
            age: 35,
            date: "1985-11-08",
            address: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          },
          {
            name: "老刘",
            age: 40,
            date: "1981-01-08",
            address: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          },
          {
            name: "赵倩",
            age: 20,
            date: "2000-11-15",
            address: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('onCurrentChange', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name','', '姓名'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('age','', '年龄')
        ])
      ]))
    },
    data() {
      return {

      }
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      onCurrentChangeHandler (currentRow, oldCurrentRow) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'onCurrentChange', currentRow)
        if (this.component.compConfigData.tableEventCode.onCurrentChangeCode) {
          eval(this.component.compConfigData.tableEventCode.onCurrentChangeCode)
        }
      }
    },
    computed: {
      inputStyleObject () {
        return {
          '--header-background-color': this.component.compConfigData.tableStyle.headerBackgroundColor,
          '--header-color': this.component.compConfigData.tableStyle.headerColor,
          '--body-background-color': this.component.compConfigData.tableStyle.bodyBackgroundColor,
          '--body-color': this.component.compConfigData.tableStyle.bodyColor,
          '--table-border-color': this.component.compConfigData.tableStyle.tableBorderColor,
          '--row-highlight-background-color': this.component.compConfigData.tableStyle.rowHighlightBackgroundColor,
          '--row-highlight-color': this.component.compConfigData.tableStyle.rowHighlightColor,
        }
      },
      tableColumns () {
        let columns = this.$PnUtil.deepClone(this.component.compConfigData.tableColumns)
        if (this.component.compConfigData.tableConfig.rankingColumn.show) {
          columns.unshift({
            title: this.component.compConfigData.tableConfig.rankingColumn.title,
            width: this.component.compConfigData.tableConfig.rankingColumn.width,
            align: 'center',
            fixed: 'left',
            render: (h, params) => {
              if (params.index == 0) {
                return h('div', [
                  h('Icon', {
                    props: {
                      custom: 'iconfont icon-medal',
                      size: this.component.compConfigData.tableConfig.rankingColumn.fontSize
                    },
                    style: {
                      color: this.component.compConfigData.tableConfig.rankingColumn.firstColor
                    }
                  })
                ]);
              }else if (params.index == 1) {
                return h('div', [
                  h('Icon', {
                    props: {
                      custom: 'iconfont icon-medal',
                      size: this.component.compConfigData.tableConfig.rankingColumn.fontSize
                    },
                    style: {
                      color: this.component.compConfigData.tableConfig.rankingColumn.secondColor
                    }
                  })
                ]);
              }else if (params.index == 2) {
                return h('div', [
                  h('Icon', {
                    props: {
                      custom: 'iconfont icon-medal',
                      size: this.component.compConfigData.tableConfig.rankingColumn.fontSize
                    },
                    style: {
                      color: this.component.compConfigData.tableConfig.rankingColumn.thirdColor
                    }
                  })
                ]);
              }
            }
          })
        }
        return columns
      },
      tableData () {
        return this.runCustomFilter(this.component.compConfigData.ds_resultObj)
      }
    }
  };

  export default _this
</script>

<style scoped>
  >>> .ivu-table-wrapper {
    border-color: var(--table-border-color) !important;
  }
  >>> .ivu-table th {
    background-color: var(--header-background-color) !important;
    color: var(--header-color) !important;
    border-color: var(--table-border-color) !important;
  }
  >>> .ivu-table td {
    background-color: var(--body-background-color) !important;
    color: var(--body-color) !important;
    border-color: var(--table-border-color) !important;
  }

  /*>>> .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
    background-color: #505050;
  }*/

  >>> .ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td, tr.ivu-table-row-highlight.ivu-table-row-hover td {
    background-color: var(--row-highlight-background-color) !important;
    color: var(--row-highlight-color) !important;
  }

  >>> .ivu-table-row-hover td {
    background-color: var(--row-highlight-background-color) !important;
    color: var(--row-highlight-color) !important;
  }
</style>
